<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            padding: 0;
            margin: 0;
        }
    </style>
</head>

<body>

    <button class="a">删除</button>

    <button class="b">买彩票</button>

    <!-- <div class="cover">
        <div class="dialog">
            <h3>信息</h3>
            <div class="content">
                <p>真的要删除我吗?</p>
            </div>
            <button>确定</button>
        </div>
    </div> -->



    <script>

        // 自定义弹窗效果
        //    约定：  每一种弹窗，只是颜色和文本不一样   


        const single = (function () {
            class Dialog {
                constructor() {
                    // 给每一种弹窗添加默认值
                    this.list = [
                        {
                            name: 'warning',
                            title: '警告',
                            des: '真的要删除我吗?',
                            bgcolor: 'red'
                        },
                        {
                            name: 'info',
                            title: '信息',
                            des: '真的要删除我吗?',
                            bgcolor: 'skyBlue'
                        },
                        {
                            name: 'success',
                            title: '成功',
                            des: '恭喜你又学费了',
                            bgcolor: 'green'
                        }
                    ]

                    this.createHTML()
                }

                createHTML() {
                    // 创建cover
                    this.oCover = document.createElement('div');
                    this.oCover.style.cssText = ` 
                    position: fixed;
                    width:100%;
                    height:100%;
                    left:0;
                    top:80px;
                    background-color: rgba(0, 0, 0, 0.5);` ;

                    // 创建dialog标签
                    const oDialog = document.createElement('div');
                    oDialog.style.cssText = `
                    width: 500px;
                    height: 300px;
                    background-color: #fff;
                    position: fixed;
                    left: 0;
                    right: 0;
                    top: 0;
                    bottom: 0;
                    margin: auto;
                    text-align: center;
                    `

                    // 创建标题
                    this.oH3 = document.createElement('h3');
                    this.oH3.style.cssText = `
                    line-height: 50px;
                    height: 50px;
                    border-bottom: 1px solid #000;
                    padding-left: 40px;
                    text-align: left;`

                    // 创建content
                    this.oContent = document.createElement('div');
                    this.oContent.style.cssText = `
                    height: 200px;
                    text-align: center;
                    line-height: 200px;
                `

                    // 创建按钮
                    this.oBtn = document.createElement('button');
                    this.oBtn.innerHTML = '确定'

                    oDialog.appendChild(this.oH3);
                    oDialog.appendChild(this.oContent);
                    oDialog.appendChild(this.oBtn);

                    this.oCover.appendChild(oDialog);

                    document.body.appendChild(this.oCover);
                }


                init(name, options = {}) {
                    this.oCover.style.display = 'block';
                    // 找到满足条件的数据
                    const res = this.list.filter(item => item.name === name)[0];
                    // 变成属性
                    this.oH3.innerHTML = options.title || res.title;
                    this.oH3.style.backgroundColor = options.bgcolor || res.bgcolor;
                    this.oContent.innerHTML = options.des || res.des;
                    this.closed()
                }


                closed() {
                    this.oBtn.onclick = () => {
                        this.oCover.style.display = 'none'
                    }
                }

            }

            let obj = null;
            return function (...arg) {
                if (!obj) {
                    obj = new Dialog();
                }

                // 始终都会调用 init
                obj.init(...arg)
                return obj
            }
        })()




        const oBtn1 = document.querySelector('.a');
        oBtn1.onclick = function () {
            single('warning', {
                bgcolor: 'orange',
                title: '警告1111'
            })
        }


        const oBtn2 = document.querySelector('.b');
        oBtn2.onclick = function () {
            single('success', {
                des: `
                    <p>我终于可以吃饭了</p>
                `
            })
        }




    </script>


</body>

</html>